<template>
<q-layout view="lHh Lpr lFf">
  <q-layout-header>
    <q-toolbar
      color="primary"
      :glossy="$q.theme === 'mat'"
      :inverted="$q.theme === 'ios'"
      >

      <q-toolbar-title>
        Dmicros - 子令牌UI Demo
        <div slot="subtitle">Powered by Dmicros v0.6.2</div>
      </q-toolbar-title>
      <q-btn
        flat
        dense
        round
        @click="toggleRightDrawer"
        aria-label="Menu"
        >
        <q-icon name="menu" />
      </q-btn>

    </q-toolbar>
  </q-layout-header>

  <q-layout-drawer
    v-model="rightDrawerOpen"
    side="right"
    :content-class="$q.theme === 'mat' ? 'bg-grey-2' : null"
    >
    <subtoken></subtoken>
  </q-layout-drawer>

  <q-page-container>
    <router-view />
  </q-page-container>
</q-layout>
</template>

<script>
import {
  mapState,
  mapMutations
} from 'vuex'
import Token from 'components/Token'

export default {
  name: 'MainMatter',
  components: {
    subtoken: Token
  },
  data () {
    return {
    }
  },
  mounted: function () {
    if (this.$q.platform.is.desktop || this.token === '') {
      this.openRightDrawer()
    }
  },
  computed: {
    ...mapState('token', [
      'token'
    ]),
    ...mapState('uistatus', [
      'rightDrawerOpen'
    ])
  },
  methods: {
    ...mapMutations('uistatus', [
      'openRightDrawer',
      'toggleRightDrawer'
    ])
  }
}
</script>

<style>
</style>
